<script setup lang="ts">
import { login } from '@/api/login/login'
import loginBg from '@/assets/login-bg.png'
import { SESSION } from '@/utils/storage'
import { ElMessage, type FormInstance } from 'element-plus'

const router = useRouter()

const formRef = ref<FormInstance>()

const form = ref({
  medical_record_number: '',
  id_last_six: '',
})

const rules = ref({
  medical_record_number: {
    required: true,
    trigger: 'change',
    message: '请输入病历号',
  },
  id_last_six: {
    required: true,
    trigger: 'change',
    message: '请输入身份证后六位',
  },
})

const handleSubmit = async () => {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return false
  try {
    const response = await login(form.value)
    if (response?.payload) {
      SESSION.set('user_info', response.payload.user_info)
      SESSION.set('is_admin', response.payload.is_admin)
      SESSION.set('access_token', response.payload.access_token)
      router.push('/')
      ElMessage.success('登录成功')
    }
  } catch (error: any) {
    const errorDetails = error?.error_details || {}
    if (errorDetails.fields) {
      ElMessage.error(Object.values(errorDetails.fields).join(', ') || '未知错误')
    } else {
      ElMessage.error(errorDetails?.description || error?.message || '未知错误')
    }
  }
}

const handleQRCodeLogin = () => {
  router.push('/qrCodeLogin')
}
</script>

<template>
  <div class="h-full bg-brand flex items-center justify-center">
    <el-image :src="loginBg" fit="cover" class="h-18vw w-18vw" alt="注册二维码" />
    <div
      class="bg-brand-dark min-w-40vw min-h-20vw p-8 rounded-lg shadow-lg flex items-center ml-20"
    >
      <div>
        <el-image
          src="http://localhost:8000/static/register_website.png"
          fit="cover"
          class="h-10vw w-10vw flex-shrink-0"
        />
        <p class="text-center text-white text-sm font-600">注册用二维码</p>
      </div>
      <div class="flex-1 min-w-0">
        <h2 class="text-center mb-10 text-2xl font-bold text-white">智能评估系统</h2>
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          size="large"
          hide-required-asterisk
          label-width="110px"
          class="flex-1 min-w-0"
          @submit.prevent="handleSubmit"
        >
          <el-form-item label="病例号" prop="username">
            <el-input
              v-model.trim="form.medical_record_number"
              clearable
              placeholder="请输入病例号"
            />
          </el-form-item>
          <el-form-item label="身份证后六位" prop="password">
            <el-input v-model.trim="form.id_last_six" clearable placeholder="请输入身份证后六位" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit" class="w-full">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="brand-darker-button w-full" @click="handleQRCodeLogin">
              扫码二维码登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="css" scoped>
:deep(.el-form-item__label) {
  color: #fff !important;
  font-weight: 600 !important;
}
:deep(.el-button--primary) {
  --el-button-border-color: #fff;
  --el-button-hover-border-color: #fff;
  font-weight: 600;
}
</style>
